$(function (){

    var endPointObj = {
        url: "http://localhost:9400/GetEmployees",
        type: 'GET',
        dataType: 'json',
        success: function(data){

            var empList = data.empData.EmployeeList;
            var i;
            var tbodyHtmlString = '';
            for(i = 0; i < empList.length; i++){
                var employee = empList[i];
                tbodyHtmlString += '<tr><td>' + employee.name +'</td>' +

                    '<td>' + employee.title + '</td>' +
                    '<td>'  + employee.city + '</td></tr>';
            }

            $('#empDetails tbody').append(tbodyHtmlString);

        },
        error: function(err){

        },
        complete: function(){

        }
    };

    $.ajax(endPointObj);

    $('#displayFormDetails').click(function(){
        // hide the employees details table data
        // load the html from form.html and display in that div

        $('.employeeDetailsContainer').hide();

        console.log($('#btnSubmit').length);//0
        $('.createUserDetailsContainer').load('form.html',function(){
            //console.log('form html is loaded');

           console.log($('#btnSubmit').length);//'btnValueLength'
            $('#btnSubmit').click(function (event){

                event.preventDefault();
                event.stopPropagation();

                saveData();
                return false;

            });
        });

    });

    function saveData(){
        //1. get all the values from the html elements in to an object

        var userDetails = {
            name : $('#nameInput').val(),
            address : $('#addressInput').val(),
            email : $('#emailInput').val(),
            phone : $('#phoneInput').val()
        }


        postData(userDetails);

        console.log(userDetails);


    }

    var postEndPointObj = {
        url: "http://localhost:9400/createUserDetails",
        type: 'POST',
        dataType: 'json',
        success: function(data){
            alert('data saved successfully')
        },
        error: function(err){
        },
        complete: function(){
        }
    };

    function postData(userDetails){

        postEndPointObj.data = userDetails;
        $.ajax(postEndPointObj);
    }


    //http://localhost:9400/createUserDetails
})